<template>
	<view class="page ">
		<u-sticky :offsetTop="0">
			<view class="page-head-tabs">
				<view class="tabs-wrap" key="tabs-1">
					<u-tabs :current="tabCurrent" :scrollable="false" :list="tabList" keyName="title" lineColor="#CB0011"
						:lineWidth="28" :lineHeight="2" @click="tabClick"
						:itemStyle="{height: '44px',fontSize: '28rpx',color:'#B3B9C9'}"
						:activeStyle="{fontWeight: 'bold',color: '#000000' }" :inactiveStyle="{}"></u-tabs>
				</view>
			</view>
		</u-sticky>


		<view class="page-ctx">
			<view data-title="商城订单" class="order-view">

				<view class="order-wrap">
					<view class="order-list">
						<view class="item" v-for="(item,index) in invoice_list" :key="index" @click="toDetail(item)">
							<view class="item-top flex-between">
								<text class="order-sn">订单号：{{item.orderId}}</text>
								<text class="status">{{item.cus_status_title}}</text>
							</view>

							<view class="item-center">
								<view class="products-wrap">
									<view class="product-list">
										<view class="product-item flex" v-for="(product,index) in item.products">
											<view class="poster-box">
												<image :src="product.image" mode="aspectFill"></image>
											</view>
											<view class="info">
												<view class="title-box">
													<view class="title ellipsis-1">
														{{product.title}}
													</view>
												</view>
												<view class="desc-box">
													<view class="desc ellipsis-1">
														{{product.keyVals}}
													</view>
												</view>
												<view class="price-box flex-between">
													<view class="price-info">
														<text class="huobi">￥</text>
														<text class="price">{{product.priceSale || 0}}</text>
														<text class="unit" v-if="product.unit">/{{product.unit}}</text>
													</view>
													<text class="num">x {{product.num}}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="item-bottom ">
								<!-- <view class="total-box ">
										<view class="price">
											合计金额：￥{{item.price}}
										</view>
									</view> -->

								<view class="btns flex">
									<view class="btn fit-text btn-detail" >
										开票详情
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>


			</view>
			<view class="load-more-wrap" style="margin-top: 40rpx;">
				<u-loadmore :status="invoice_loadmore_status" />
			</view>
		</view>
		<!-- 列表 -->
	</view>
</template>

<script>
	// import invoice_list_for_shop from '@/components/invoice/invoice_list_for_shop.vue'
	export default {
		components: {
			// invoice_list_for_shop,
		},
		data() {
			return {
				//
				tabCurrent: 0,
				tabSelect: {
					title: '全部',
					value: 0,
				},
				tabList: [{
						title: '全部',
						value: 0,
					},
					{
						title: '待开票',
						value: 1,
					},
					{
						title: '已开票',
						value: 2,
					},
					// {
					// 	title: '已作废',
					// 	value: -1,
					// },
				],

				//
				count: 0,
				invoice_list: [],
				pagination: {
					page: 1,
					pageNum: 10
				},
				invoice_loadmore_status: 'loadmore', //loadmore  / loading / nomore

				statusNameMap: { //	状态：0-全部 2-待开票 3-已开票
					0: "",
					1: "待开票",
					2: "已开票",
					'-1': "已作废",
				},
				//
			}
		},

		onLoad(option) {
			this.setView();
		},
		onShow() {

		},
		onReachBottom() {
			this.loadMore()
		},

		methods: {
			loadMore() {
				if (this.invoice_loadmore_status == 'loadmore') {
					this.invoice_loadmore_status = 'loading'
					this.pagination.page++;
					this.query_invoice();
				}
			},
			initQuery() {
				this.invoice_list = [];
				this.pagination.page = 1;
				this.invoice_loadmore_status = 'loadmore'
			},
			setView() {
				this.query_invoice()
			},
			query_invoice() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'invoices_getList',
						...this.pagination,
						status: this.tabSelect.value, //0 全部 1- 待开票 2 已开票 -1 已作废
					},
				}).then(res => {
					if (res.code == 200) {
						this.count = res.data.count || 0;
						let list = res.data.list ||  []
						list.forEach(v => {
							v.products = JSON.parse(v.info)
							// v.info  = v.products[0]

							v.cus_status_title = this.statusNameMap[v.status]
						})
						this.invoice_list = this.invoice_list.concat(list);
						this.invoice_loadmore_status = this.count > this.invoice_list.length ? 'loadmore' : 'nomore';
					}
				})
			},



			tabClick(item) {
				this.tabCurrent = item.index
				this.tabSelect = item
				this.initQuery();
				this.setView();
			},


			toDetail(item) {
				this.toRoute({
					path: '/invoice-detail',
					query: {
						invoiceId: item.id,
						orderId: item.typeId,
					}
				})
			},

		}
	}
</script>


<style lang="scss">
	page {
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	.page-ctx {
		padding: 24rpx 32rpx;
	}

	.page-head-tabs {
		background: #fff;
	}

	.page-head-tabs {
		// position: fixed;
		// z-index: 10;
		// top: 0;
		// left: 0;
		// right: 0;
		background: #fff;
	}



	.order-wrap {
		.order-list {
			.item {
				margin-bottom: 24rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				padding: 32rpx 24rpx;
				margin-bottom: 20rpx;
				background: #FFFFFF;


				.item-top {
					padding: 0 0;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;

					.order-sn {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #B3B9C9;
					}

					.status {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FF0000;
					}
				}

				.item-center {
					// border-top: 1rpx solid #eee;
				}

				.item-bottom {
					// border-top: 1rpx solid #eee;
					// padding: 20rpx 0;


					.total-box {
						text-align: right;

						.price {
							text-align: right;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
						}
					}

					.btns {
						margin-top: 30rpx;
						flex: 1;
						justify-content: flex-end;
						overflow: hidden;
						flex-wrap: wrap;

						.btn {
							margin-left: 20rpx;
							padding: 0 24rpx;
							min-width: 146rpx;
							height: 64rpx;
							background: #F8F8F8;
							border-radius: 40rpx 40rpx 40rpx 40rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #333333;

							&.btn-detail {}

							&.btn-pay {
								background: #CB0011;
								color: #FFFFFF;
							}

							&.btn-reviews {}

							&.btn-cancel {}
						}
					}
				}
			}
		}



		.products-wrap {
			padding: 0 0;

			.product-list {
				.product-item {
					padding: 32rpx 0;

					&+.product-item {
						border-top: 1rpx solid #eee;
					}

					.poster-box {
						width: 176rpx;
						height: 176rpx;
						border-radius: 8rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.info {
						flex: 1;
						overflow: hidden;
						padding-left: 32rpx;



						.title-box {}

						.title {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #222222;
							line-height: 1.5;
						}

						.desc-box {
							margin-top: 14rpx;

							.desc {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: #B2AFC9;
								line-height: 32rpx;
							}
						}


						.price-box {
							margin-top: 24rpx;

							.price-info {
								.huobi {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 20rpx;
									color: #000000;
								}

								.price {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 36rpx;
									color: #000000;
								}

								.unit {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 20rpx;
									color: #000000;
								}
							}

							.num {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 24rpx;
								color: #000000;
							}

						}
					}
				}

			}

		}
	}
</style>